<template>
  <div>
    <el-card shadow="never">
      <div slot="header">
        <span>{{ $t('今日总览') }}</span>
      </div>
      <div style="width: 100%;display: flex;">
        <div class="col">
          <div class="page_col page_img1">
            <div style="display:flex;align-items: center;margin-left: 20px">
              <img class="img" src="../../../../assets/home_creditReview/order_num.png">
              <span style="margin-left: 5px;font-size:20px">{{ overViewData.orderNum }}</span>
            </div>
            <div style="text-align: center;margin-top:5px">{{ $t('订单数') }}</div>
          </div>
        </div>
        <div class="col">
          <div class="page_col page_img2">
            <div style="display:flex;align-items: center;margin-left: 20px">
              <img class="img" src="../../../../assets/home_creditReview/order_wait.png">
              <span style="margin-left: 5px;font-size:20px">{{ overViewData.notAudit }}</span>
            </div>
            <div style="text-align: center;margin-top:5px">{{ $t('待审数') }}</div>
          </div>
        </div>
        <div class="col">
          <div class="page_col page_img3">
            <div style="display:flex;align-items: center;margin-left: 20px">
              <img class="img" src="../../../../assets/home_creditReview/order_pass.png">
              <span style="margin-left: 5px;font-size:20px">{{ overViewData.pass }}</span>
            </div>
            <div style="text-align: center;margin-top:5px">{{ $t('通过数') }}</div>
          </div>
        </div>
        <div class="col">
          <div class="page_col page_img4">
            <div style="display:flex;align-items: center;margin-left: 20px">
              <img class="img" src="../../../../assets/home_creditReview/order_refuse.png">
              <span style="margin-left: 5px;font-size:20px">{{ overViewData.refuse }}</span>
            </div>
            <div style="text-align: center;margin-top:5px">{{ $t('拒绝数') }}</div>
          </div>
        </div>
        <div class="col">
          <div class="page_col page_img5">
            <div style="display:flex;align-items: center;margin-left: 20px">
              <img class="img" src="../../../../assets/home_creditReview/order_close.png">
              <span style="margin-left: 5px;font-size:20px">{{ overViewData.close }}</span>
            </div>
            <div style="text-align: center;margin-top:5px">{{ $t('关闭数') }}</div>
          </div>
        </div>
        <div class="col">
          <div class="page_col page_img1">
            <div style="display:flex;align-items: center;margin-left: 20px">
              <img class="img" src="../../../../assets/home_creditReview/order_success.png">
              <span style="margin-left: 5px;font-size:20px">{{ overViewData.disposeRate }}</span>
            </div>
            <div style="text-align: center;margin-top:5px">{{ $t('处理率') }}</div>
          </div>
        </div>
      </div>
    </el-card>

    <div style="margin-top: 15px;display: flex;">
      <el-card shadow="never" :body-style="{padding:'10px'}" style="width:30%;margin-right: 1%">
        <div slot="header">
          <span>{{ $t('工作效率') }}</span>
        </div>
        <el-tabs v-model="effectActive" @tab-click="getEffect">
          <el-tab-pane :label="$t('天简报')" name="1"></el-tab-pane>
          <el-tab-pane :label="$t('周简报')" name="2"></el-tab-pane>
          <el-tab-pane :label="$t('月简报')" name="3"></el-tab-pane>
          <Table :page="false" border :table-data="effectTableData">
            <el-table-column :label="$t('时间')" align="center" prop="time"></el-table-column>
            <el-table-column :label="$t('已办数')" align="center" prop="num"></el-table-column>
            <el-table-column
                :label="effectActive === '1' ? $t('环比上一天效率') : effectActive === '2' ? $t('环比上周效率') : $t('环比上月效率')"
                align="center" prop="effect">
              <template slot-scope="{row}">
                <span v-if="row.effect || row.effect === 0">
                  <i
                      v-show="row.effect !== 0"
                      :class="row.effect > 0 ? 'el-icon-top' : 'el-icon-bottom'"
                     :style="{color:row.effect > 0 ? '#0EC270' : '#FE6B6B'}"></i>
                   {{ row.effect }}%
                </span>
                <span v-else> - </span>
              </template>
            </el-table-column>
          </Table>
        </el-tabs>
      </el-card>
      <el-card shadow="never" :body-style="{padding:'10px'}" style="width:69%">
        <div slot="header">
          <span>{{ $t('工作质量') }}</span>
        </div>
        <el-tabs v-model="qualityActive" @tab-click="getQuality">
          <el-tab-pane :label="$t('周业绩')" name="1"></el-tab-pane>
          <el-tab-pane :label="$t('月业绩')" name="2"></el-tab-pane>
          <Table :page="false" border :tableColumn="qualityTableColumn" :table-data="qualityTableData">
            <template slot="passRate" slot-scope="{row}">
              <span v-show="row.passRate">{{ row.passRate }}%</span>
            </template>
          </Table>
        </el-tabs>
      </el-card>
    </div>

    <div style="margin-top: 15px;display: flex;">
      <el-card shadow="never" :body-style="{padding:'15px'}" style="width:64%;margin-right: 1%">
        <div slot="header">
          <span>{{ $t('曲线图') }}</span>
        </div>
        <div style="text-align: right">
          <el-radio-group v-model="chartsType" @change="getCharts" size="mini">
            <el-radio-button :label="1">{{ $t('近7天') }}</el-radio-button>
            <el-radio-button :label="2">{{ $t('近30天') }}</el-radio-button>
            <el-radio-button :label="3">{{ $t('近1年') }}</el-radio-button>
          </el-radio-group>
        </div>
        <ve-line height="400px" :data="chartsData" :extend="chartsExtend"
                 :settings="amountSettings"
                 ref="charts1"></ve-line>
      </el-card>
      <div style="width:35%;">
        <el-card shadow="never" :body-style="{padding:'10px'}">
          <div slot="header">
            <span>{{ $t('我的排行') }}</span>
          </div>
          <el-tabs v-model="rankActive" @tab-click="getRanking">
            <el-tab-pane :label="$t('处理率')" name="1"></el-tab-pane>
            <el-tab-pane :label="$t('通过率')" name="2"></el-tab-pane>
            <Table :page="false" border :tableColumn="rankTableColumn" :table-data="rankTableData">
            </Table>
          </el-tabs>
        </el-card>
        <el-card shadow="never" :body-style="{padding:'10px'}" style="margin-top: 15px">
          <div slot="header">
            <span>{{ $t('上周数据') }}</span>
          </div>
          <div style="text-align: center">
            <el-progress type="circle" :percentage="lastWeekPassRate"></el-progress>
            <p>{{ $t('上周通过率') }}</p>
          </div>
        </el-card>
      </div>
    </div>
  </div>
</template>

<script>
import {
  fetchPersonalEffect,
  fetchPersonalQuality,
  fetchPersonalOverview,
  fetchPersonalRanking,
  fetchPersonalDataTrend
} from "@/api/order"
import VeLine from 'v-charts/lib/line.common'
import {formatMoney} from "@/utils/tools";

export default {
  name: "personalData",
  components: {
    VeLine
  },
  props: {
    productName: {},
    type:{}
  },
  data() {
    return {
      effectTableColumn: [],
      effectTableData: [],
      qualityTableColumn: [
        {label: this.$t('时间'), prop: 'date', align: 'center'},
        {label: this.$t('已办数'), prop: 'haveDoneNum', align: 'center'},
        {label: this.$t('通过数'), prop: 'pass', align: 'center'},
        {label: this.$t('拒绝数'), prop: 'refuse', align: 'center'},
        {label: this.$t('关闭数'), prop: 'close', align: 'center'},
        {label: this.$t('通过率'), prop: 'passRate', align: 'center', slot: 'passRate'},
      ],
      rankTableColumn: [
        {label: this.$t('类别'), prop: 'typeName', align: 'center'},
        {label: this.$t('组内排名'), prop: 'groupRanking', align: 'center'},
        {label: this.$t('公司排名'), prop: 'companyRanking', align: 'center'},
      ],
      rankTableData: [],
      qualityTableData: [],
      qualityData: [],
      chartsType: 1,
      effectActive: '1',
      overViewData: {},
      qualityActive: '1',
      rankActive: '1',
      chartsExtend: {
        color: ['#F1B901'],
        series: {
          smooth: false
        },
        grid: {
          right: 30
        },
        yAxis: {
          splitLine: {
            lineStyle: {
              color: '#eeeeee'
            }
          },
          axisLabel: {}
        },
      },
      amountSettings: {
        yAxisName: [this.$t('笔数')],
        labelMap: {
          time: this.$t('日期'),
          dispose: this.$t('处理效率'),
        },
      },
      chartsData: {
        columns: ['time', 'dispose',],
        rows: []
      },
    }
  },
  computed: {
    lastWeekPassRate() {
      const value = this.qualityData.find(item => item.type === 2)
      return value ? value.passRate : 0
    }
  },
  watch: {
    productName() {
      this.getData()
    },
    type() {
      this.getData()
    }
  },
  mounted() {
    this.getData()
  },
  methods: {
    getData() {
      this.getEffect()
      this.getQuality()
      this.getOverView()
      this.getRanking()
      this.getCharts()
    },
    // 获取今日总览
    async getOverView() {
      const res = await fetchPersonalOverview({productName: this.productName || null})
      if (res.code === 1) {
        this.overViewData = res.data
      }
    },
    // 获取工作效率
    async getEffect() {
      const res = await fetchPersonalEffect({productName: this.productName || null})
      if (res.code === 1) {
        const data = res.data
        const dateTitle = {
          'day1': this.$t('今日'),
          'day2': this.$t('本周'),
          'day3': this.$t('本月'),
          'yesterday1': this.$t('昨日'),
          'yesterday2': this.$t('上周'),
          'yesterday3': this.$t('上月'),
        }
        const numValue = {
          'day1': data.todayProcessed,
          'day2': data.thisWeekProcessed,
          'day3': data.thisMonthProcessed,
          'yesterday1': data.yesterdayProcessed,
          'yesterday2': data.lastWeekProcessed,
          'yesterday3': data.lastMonthProcessed,
        }
        const effectValue = {
          'day1': data.todaySequential,
          'day2': data.thisWeekSequential,
          'day3': data.thisMonthSequential,
        }
        this.effectTableData = [
          {
            time: dateTitle['day' + this.effectActive],
            num: numValue['day' + this.effectActive],
            effect: effectValue['day' + this.effectActive]
          },
          {
            time: dateTitle['yesterday' + this.effectActive],
            num: numValue['yesterday' + this.effectActive],
          }
        ]
      }
    },
    // 获取工作质量
    async getQuality() {
      const res = await fetchPersonalQuality({productName: this.productName || null})
      if (res.code === 1) {
        // type 1本周2上周 3本月 4 上月
        this.qualityData = res.data
        // 获取周数据
        const weekData = res.data.filter(item => {
          if (item.type === 1 || item.type === 2) {
            item.date = item.type === 1 ? this.$t('本周') : this.$t('上周')
          }
          return item.type === 1 || item.type === 2
        })
        // 获取月数据
        const mouthData = res.data.filter(item => {
          if (item.type === 3 || item.type === 4) {
            item.date = item.type === 3 ? this.$t('本月') : this.$t('上月')
          }
          return item.type === 3 || item.type === 4
        })
        const data = this.qualityActive === '1' ? weekData : mouthData
        this.qualityTableData = data
      }
    },
    // 获取个人排名
    async getRanking() {
      const res = await fetchPersonalRanking({productName: this.productName || null})
      if (res.code === 1) {
        // 获取处理率
        const handleRate = res.data.filter(item => {
          if (item.type === 1 || item.type === 2) {
            item.typeName = item.type === 1 ? this.$t('本周处理率') : this.$t('上周处理率')
          }
          return item.type === 1 || item.type === 2
        })
        // 获取通过率
        const passRate = res.data.filter(item => {
          if (item.type === 3 || item.type === 4) {
            item.typeName = item.type === 3 ? this.$t('本周通过率') : this.$t('上周通过率')
          }
          return item.type === 3 || item.type === 4
        })
        const data = this.rankActive === '1' ? handleRate : passRate
        this.rankTableData = data
      }
    },
    // 获取个人曲线图
    async getCharts() {
      const res = await fetchPersonalDataTrend({productName: this.productName || null, type: this.chartsType})
      if (res.code === 1) {
        this.chartsData.rows = res.data
      }
    },
  }
}
</script>

<style scoped lang="less">
.col {
  width: 16.6%;
  padding: 0 10px;
}

.page_col {
  background-size: 100% 100%;
  height: 120px;
  color: #fff;
  box-sizing: border-box;
  padding: 25px 0;

  .img {
    height: 49px;
    width: 49px;
  }
}

.page_img1 {
  background-image: url('../../../../assets/home_creditReview/page1.png');
}

.page_img2 {
  background-image: url('../../../../assets/home_creditReview/page2.png');
}

.page_img3 {
  background-image: url('../../../../assets/home_creditReview/page3.png');
}

.page_img4 {
  background-image: url('../../../../assets/home_creditReview/page4.png');
}

.page_img5 {
  background-image: url('../../../../assets/home_creditReview/page5.png');
}
</style>
